<script setup lang='ts'>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NotLayoutPage from '../compoments/notlayoutpage.vue'
import { type FormInstance, type FormItemRule } from 'element-plus';
import { IdCard, RealName } from '../validate';
import { isPhone, } from '@pureadmin/utils';
import { ApplayGameGuildBody, postApplayGameGuildBody, getGameGuildApplayInfo, getMCNApplayInfo } from '@/api/cooperation';
import { ApplayMCNBody, postApplayMCN } from '@/api/cooperation/mcn';
import { useDark } from '@vueuse/core'
import { getApplayAnchorSelect, FormatedApplayAnchorSelect } from '@/api/common';
import { message } from '@/utils/message';
const env = import.meta.env
defineOptions({
  name: 'ApplyOrganization'
})
const router = useRouter()
const route = useRoute()
// 当前是游戏工会
const isGameGuild = computed(() => !!route.params.registryType)
useDark()
const title = computed(() => {
  const typeCn = isGameGuild.value ? '公会' : '机构'
  return `${typeCn}注册`
})

// 用于表格选择的原始数据
const selectInfo = reactive<FormatedApplayAnchorSelect>({})

onMounted(() => {
  getApplayAnchorSelect().then((data) => {
    Object.assign(selectInfo, data)
  });

})
function jump(pathId: string) {
  router.push({ name: pathId })

}


/**
 * 是否已经申请过
 */
const isApplayed = ref(false)
const formModel = reactive<ApplayGameGuildBody | ApplayMCNBody>({
  agree: '0',
  // game_type: 0,
  man_post: '',
  organ_name: '',
  mcn_name: '',
  relName: env.DEV ? '熊二' : '',
  scale: '',
  tellphone: env.DEV ? '13131313131' : '',
  IdNumber: env.DEV ? '100000199712144519' : '',
  livePlatformId: ''
})
onMounted(() => {
  const permise = route.params.registryType ? getGameGuildApplayInfo() : getMCNApplayInfo();
  permise.then(({ data }) => {
    console.log(data);
    Object.assign(formModel, data)
    isApplayed.value = true
  }, e => {
    console.error(e.message);

  })
})
const formRule = reactive<Partial<Record<keyof ApplayGameGuildBody, FormItemRule[]>>>({
  relName: [
    { required: true, message: '请输入真实的姓名' },
    { pattern: RealName, message: '请输入2-10位文字' },
  ],
  tellphone: [
    { required: true, message: '请输入您的手机号码' },
    {
      validator: (r, v, c) => {
        if (isPhone(v)) {
          c()
        } else {
          c(new Error('请输入正确的手机号码'))
        }
      }
    },
  ],
  organ_name: [
    {
      validator: (r, v, c) => {
        if (!isGameGuild.value) {
          c()
        } else if (formModel.organ_name) {
          if (RealName.test(v)) {
            c()
          } else {
            c(new Error('请输入2-10位文字'))
          }
        } else {
          c(new Error('请输入您的机构名称'))
        }
      }
    },
    /* { required: true, message: '请输入您的mcn机构名称' },
    { pattern: RealName, message: '请输入2-10位文字' }, */
  ],
  mcn_name: [
    {
      validator: (r, v, c) => {
        if (isGameGuild.value) {
          c()
        } else if (formModel.mcn_name) {
          if (RealName.test(v)) {
            c()
          } else {
            c(new Error('请输入2-10位文字'))
          }
        } else {
          c(new Error('请输入您的mcn机构名称'))
        }
      }
    },
    /* { required: true, message: '请输入您的mcn机构名称' },
    { pattern: RealName, message: '请输入2-10位文字' }, */
  ],
  game_type: [
    {
      validator: (r, v, c) => {
        if (!isGameGuild.value || formModel.game_type) {
          c()
        } else {
          c(new Error('请选择机构的游戏类型'))
        }
      }
    },
  ],
  IdNumber: [
    { required: true, message: '请输入您的身份证号码' },
    { type: 'string', pattern: IdCard, message: '请输入正确的身份证号码' },
  ],
  livePlatformId: [
    { required: true, message: '请选择你的直播平台' },
  ],
  scale: [
    { required: true, message: '请选择你的直播平台' },
  ],
  man_post: [
    { required: true, message: '请输入你的直播间号/地址' },
  ],
  agree: [
    {
      validator: (r, v, c) => {
        if (isApplayed.value) {
          c()
        } else if (v !== '1') {
          c(new Error('请同意主播合作协议'))
        } else {
          c()
        }
      }
    },
  ],
})
const formRef = ref<FormInstance>()
async function submit() {
  await formRef.value.validate();
  const { mcn_name, organ_name, ...ops } = formModel
  const permise = isGameGuild.value ? postApplayGameGuildBody({ organ_name, ...ops } as ApplayGameGuildBody) : postApplayMCN({ mcn_name, ...ops } as ApplayMCNBody)
  permise
    .then(
      () => message('提交成功', { type: 'success' }),
      e => { message(e.message, { type: 'error' }) }
    )
}
</script>

<template>
  <NotLayoutPage>
    <ElCard>
      <template #header>
        <h2><span>{{ title }}</span> <span class="text-amber-400 text-sm">{{ isApplayed ? '审核中...' : '' }}</span></h2>
      </template>
      <div class="w-2/5 mx-auto">

        <ElForm :disabled="isApplayed" ref="formRef" label-position="top" :model="formModel" :rules="formRule">
          <ElFormItem label="姓名" prop="relName">
            <ElInput placeholder="请输入真实姓名" v-model="formModel.relName"></ElInput>
          </ElFormItem>
          <ElFormItem label="手机号" prop="tellphone">
            <ElInput placeholder="请输入您的手机号码" v-model="formModel.tellphone"></ElInput>
          </ElFormItem>
          <ElFormItem label="身份证号" prop="IdNumber">
            <ElInput placeholder="请输入您的身份证号码" v-model="formModel.IdNumber"></ElInput>
          </ElFormItem>
          <ElFormItem required v-if="isGameGuild" label="您所在的机构名称" prop="organ_name">
            <ElInput placeholder="输入机构名称" v-model="formModel.organ_name"></ElInput>
          </ElFormItem>
          <ElFormItem required v-else label="您所在的MCN机构名称" prop="mcn_name">
            <ElInput placeholder="输入MCN机构名称" v-model="formModel.mcn_name"></ElInput>
          </ElFormItem>
          <ElFormItem required v-if="isGameGuild" label="擅长的游戏类型" prop="game_type">
            <ElSelect placeholder="选择工会游戏类型" v-model="formModel.game_type">
              <ElOption v-for="[id, name] of selectInfo.game_type" :value="id" :label="name"></ElOption>
            </ElSelect>
            <!-- <ElInput placeholder="输入MCN机构名称" v-model="formModel.game_type"></ElInput> -->
          </ElFormItem>
          <ElFormItem label="您所在的直播平台" prop="livePlatformId">
            <ElSelect filterable placeholder="选择您直播所在的平台" v-model="formModel.livePlatformId">

              <ElOption v-for="[value, label] of selectInfo.live_platform" :value="value" :label="label"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="旗下主播规模" prop="scale">
            <ElSelect placeholder="选择您旗下的主播规模" v-model="formModel.scale">
              <ElOption v-for="[value, label] of selectInfo.scale" :value="value" :label="label"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="您的职位" prop="man_post">
            <ElSelect placeholder="选择您旗下的主播规模" v-model="formModel.man_post">
              <ElOption v-for="[value, label] of selectInfo.man_post" :value="value" :label="label"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem v-if="formModel.state === '2'" label="龙之起源旗下经纪人">
            <ElButton text type="primary" @click="jump('cooperation-org-agent')">
              <span>查看经纪人</span>
              <span class="text-blue-600">(8)</span>
            </ElButton>
          </ElFormItem>
          <ElFormItem v-if="formModel.state === '2'" label="龙之起源旗下主播">
            <ElButton text type="primary" @click="jump('cooperation-org-anchors')">
              <span>查看主播</span>
              <span class="text-blue-600">(88)</span>
            </ElButton>
          </ElFormItem>
          <div v-if="!isApplayed" class="text-center text-zinc-400 text-sm">请认真核对您的信息，有助于更快通过审核！</div>
          <ElFormItem v-if="!isApplayed" prop="agree">

            <div class="text-center self-center text-sm flex items-center justify-center gap-2 w-full">
              <ElCheckbox true-value="1" false-value="0" v-model="formModel.agree"></ElCheckbox>
              <div>
                <span>我已阅读并同意</span>
                <span class="text-blue-500">《主播合作协议》</span>
              </div>
            </div>
            <template #error="{ error }">
              <div class="text-center w-full text-red-400 text-sm">{{ error }}</div>
            </template>
          </ElFormItem>

        </ElForm>

        <div v-if="isApplayed" class="text-center text-zinc-400 text-sm">
          <span>审核时长</span>
          <span class="text-blue-500">2个工作日以内</span>
        </div>

        <div class="flex justify-center">
          <ElButton :disabled="isApplayed" style="padding:0 6rem;" @click="submit" type="primary">
            {{ isApplayed ? '审核中...' : '注册' }}
          </ElButton>
        </div>
      </div>
    </ElCard>
  </NotLayoutPage>
</template>

<style lang='scss' scoped></style>
